Summary

Add a new useAppState() React hook that lets components subscribe to app state changes, following the same pattern as the existing useColorScheme() and useWindowDimensions() hooks.

Problem

Currently, tracking app state requires manually managing AppState event listeners and local state:

// Before - verbose boilerplate
function MyComponent() {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const sub = AppState.addEventListener('change', setAppState);
    return () => sub.remove();
  }, []);
}

Solution

A single-line hook using React's useSyncExternalStore:

// After - clean and simple
import { useAppState } from 'react-native';

function MyComponent() {
  const appState = useAppState();
  // Returns: 'active' | 'background' | 'inactive' | 'unknown'
}

Common use cases for mobile apps

• Refresh data when the app returns to foreground
• Pause/resume media when the app is backgrounded
• Save drafts when the user leaves the app
• Disable network polling while in background to save battery
• Track analytics for session foreground/background time

What's included

• useAppState.js - Hook implementation using useSyncExternalStore
• useAppState.d.ts - TypeScript declarations
• Export from react-native package (index.js + index.js.flow)
• Jest mock for testing (useAppState returns 'active' by default)
• Unit tests following the useColorScheme test pattern

Changelog:

[GENERAL] [ADDED] - Add useAppState() hook for subscribing to app foreground/background state changes

Test Plan

1. Import useAppState from react-native and use in a component
2. Verify it returns 'active' when the app is in the foreground
3. Background the app and verify the component re-renders with 'background'
4. Return to the app and verify it changes back to 'active'
5. On iOS, trigger the app switcher and verify 'inactive' state
6. Unit tests validate mock behavior and hook contract